<template>
  <div id="app">
    <h1>Vue JS 子应用</h1>
    <p v-if="role === 'admin'">管理员可见的内容</p>
    <p v-if="role === 'user'">普通用户可见的内容</p>
    <p v-if="role === 'guest'">访客可见的内容</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      role: 'guest',
    };
  },
  mounted() {
    // 监听基座发送的数据
    window.microApp?.addDataListener((data) => {
      console.log('Vue JS 子应用收到数据:', data);
      this.role = data.role;
    });

    // 向基座发送数据
    window.microApp?.dispatch({ message: 'Hello from Vue JS App' });
  },
  // beforeDestroy() { // 已被废弃
  beforeUnmount() {
    window.microApp?.clearDataListener();
  },
};
</script>